<template>
	<view class="">
		<view v-for="(item, index) in list" :key="index" class="card mb-1 position-relative"
			style="width:708rpx;height:320rpx;" :class="{ even: index % 2 != 0 }"
			@click="toDetail(item.class_code, index, item.user_id, item.class_id,item.imei)">
			<image src="../../static/img/ic_home_class_item_one.png" style="width:708rpx;height:320rpx;"
				v-if="index % 2 == 0" class="position-absolute" mode=""></image>
			<image src="../../static/img/ic_home_class_item_two.png" style="width:708rpx;height:320rpx;" v-else
				class="position-absolute" mode=""></image>
			<view class="flex-column position-absolute" style="padding:40rpx 30rpx 30rpx 30rpx;width: 640rpx;">
				<view class="flex">
					<view class="" style="width:200rpx;" @click.stop="uploadImg(item.user_id)">
						<image :src="item.headImg"
							style="width:110rpx;height:110rpx;border-radius:10rpx;margin-bottom: 15rpx;border-radius: 50%;"
							v-if="item.headImg" mode=""></image>
						<image src="../../static/img/ic_default_head.png"
							style="width:110rpx;height:110rpx;border-radius:10rpx;margin-bottom: 15rpx;border-radius: 50%;" v-else mode="">
						</image>
						<view class="colorfff font24 fontbold">{{ item.dl }}</view>
						<view class="colorfff font24 fontbold">设备状态：{{ item.sbstatus }}</view>
					</view>
					<view class="flex-colum flex-1" style="margin-left: 17rpx;">
						<!-- <view class="font26 colorfff font-weight-500 overflow-hidden"
							style="line-height:1.2;margin-bottom: 10rpx;">
							姓名：{{ item.user_name }}
						</view> -->
						<view class="colorfff font26 fontbold line-height:1.2;margin-bottom: 10rpx;">
							姓名：{{ item.user_name }}</view>
						<view class="colorfff font26 fontbold">年级：{{ item.class_njname }}</view>
						<view class="colorfff font26 fontbold">班级：{{ item.class_bjname }}</view>
						<view class="colorfff font26 fontbold">班主任：{{ item.master_user_name }}</view>
						<view class="colorfff font26 fontbold">学校：{{ item.school }}</view>
					</view>
				</view>
				<view class="flex-column position-absolute" style="right:30rpx;top: 50rpx;">
					<view class="classDetail font20 colorfff flex align-center justify-center mb-2"
						@click.stop="wendu(item.user_id)">
						<view class="">{{item.temperature}}℃</view>
					</view>
					<view class="classDetail font20 colorfff flex align-center justify-center"
						@click.stop="steps(item.imei)">
						<view class="">{{item.num}}步</view>
					</view>
				</view>
				<!-- <view class="flex">
					<view class="classDetail font20 colorfff align-center text-center mr-2" @click.stop="wendu(item.user_id)"><view class="">查看温度</view></view>
					<view class="classDetail font20 colorfff align-center text-center"><view class="">班级详情</view></view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		props: {
			list: {
				type: Array,
				default: []
			}
		},
		methods: {
			steps(imei) {
				uni.setStorage({
					key: 'imei',
					data: imei
				});
				uni.navigateTo({
					url: "../../pages/steps/steps"
				});
			},
			toDetail(id, index, userId, classId, imei) {
				uni.navigateTo({
					url: '../classdetail/classdetail?id=' + id + '&index=' + index + '&userId=' + userId +
						'&classId=' + classId + '&imei=' + imei
				});
			},
			wendu(data) {
				uni.navigateTo({
					url: '../../pages/class/temperature/temperature?id=' + data
				});
			},
			uploadImg(id) {
				uni.chooseImage({
					success: chooseImageRes => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: this.$http.baseUrl + '/FileUpload.shtml', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {},
							success: uploadFileRes => {
								console.log(uploadFileRes);
								if (uploadFileRes.statusCode == 200) {
									let data = JSON.parse(uploadFileRes.data);
									console.log(data);
									this.changeAvator(data.filePath, data.url,id);
								}
							}
						});
					}
				});
			},
			changeAvator(path,url,id) {
				let _this = this;
				let opts = {
					url: 'SaveStudentHd.shtml'
				};
				let param = {
					xsId: id,
					headImg: path,
				};
				_this.$http.httpTokenRequest(opts, param).then(
					res => {
						console.log(res.data);
						if (res.data.code == '200') {
							this.$emit('changeHead')
						}
					})
			}
		}
	};
</script>

<style>
	/* .card {
	height: 320rpx;
	background-image: url(../../static/img/ic_home_class_item_one.png);
	background-size: 708rpx 320rpx;
}
.card.even {
	background-image: url(../../static/img/ic_home_class_item_two.png);
} */
	.card .classDetail {
		width: 160rpx;
		height: 60rpx;
		background: rgba(241, 127, 34, 1);
		border-radius: 30rpx;
	}

	.card.even .classDetail {
		width: 180rpx;
		height: 50rpx;
		background: rgba(99, 147, 244, 1);
		border-radius: 30rpx;
	}

	.card .hoverButton {
		background: rgba(241, 127, 34, 0.4);
	}

	.card.even .hoverButton {
		background: rgba(99, 147, 244, 0.4);
	}
</style>
